<template>
  <q-drawer
    v-model="drawer"
    show-if-above
    :mini="miniState"
    @mouseover="miniState = false"
    @mouseout="miniState = true"
    :width="200"
    :breakpoint="500"
    bordered
    content-class="bg-grey-3"
  >
    <q-scroll-area class="fit">
      <q-list padding>
        <q-item clickable v-ripple to="/quasar/index">
          <q-item-section avatar>
            <q-icon name="inbox"/>
          </q-item-section>

          <q-item-section>
            首页
          </q-item-section>
        </q-item>

        <q-item clickable v-ripple to="/quasar/examStart">
          <q-item-section avatar>
            <q-icon name="star"/>
          </q-item-section>

          <q-item-section>
            我的考试
          </q-item-section>
        </q-item>

        <q-item clickable v-ripple>
          <q-item-section avatar>
            <q-icon name="send"/>
          </q-item-section>

          <q-item-section>
            查看成绩
          </q-item-section>
        </q-item>

        <q-separator/>

        <q-item clickable v-ripple>
          <q-item-section avatar>
            <q-icon name="drafts"/>
          </q-item-section>

          <q-item-section>
            查看题库
          </q-item-section>
        </q-item>
      </q-list>
    </q-scroll-area>
  </q-drawer>
</template>

<script>
  export default {
    name: "Menu",
    data() {
      return {
        drawer: false,
        miniState: true
      }
    }
  }
</script>

<style scoped>

</style>
